<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器续</title>
    <style>
/*        !*子孙后代选择器*!
        !*最后一个项之后的后代都会选中*!
        body div p{
            color: yellow;
        }*/

        /*子元素选择器*/
        /*空格改为>号*/
        body>div>p{     /*如果没有body,就只看格式(body>div>p),满足这个格式都会被选择到*/
            color: red;
        }
        /*伪类选择器*/
        a:link{color:red;}/*未访问*/
        a:visited{color: blue;}/*访问过*/
        a:hover{color: green}/*悬停*/
        a:active{color: yellow}/*点击*/
    </style>
</head>
    <body>
    <a href="http://www.tedu.cn">超链接1</a>
    <a href="http://doc.canglaoshi.org">超链接2</a>
    <a href="http://www.qq.com">超链接3</a>
        <p>p1</p>
        <div>
            <p>p2</p>

            <div>
                <p>p3</p>
            </div>

            <div>
                <p>p4</p>
                <div><p>p5</p></div>
            </div>
        </div>
    </body>
</html>